<div class="container-xl">
  <!-- Page title -->
  <div class="page-header d-print-none">
    <div class="row align-items-center">
      <div class="col">
        <h2 class="page-title" id="recommend_title"></h2>
      </div>
    </div>
  </div>
</div>
<!-- 业务页面代码 -->
<div class="page-body">
  <div class="container-xl">
    <div class="row row-cards" id="recommend_content">
      {% for item in Items %}
        <div class="col-6 col-md-3 col-xl-2">
          <div class="card card-sm card-link-pop rounded-3">
            {% if item.weekday %}
              <span class="badge badge-pill {% if item.fav == 2 %}bg-green{% else %}bg-orange{% endif %}"
                    style="position:absolute;top:10px;left:10px;">{{ item.weekday }}</span>
            {% else %}
              {% if item.fav == 2 %}
                <div class="badge badge-pill bg-green" style="position:absolute;top:10px;left:10px;padding:0;">
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"
                       class="h-3 w-3 sm:h-4 sm:w-4">
                    <path fill-rule="evenodd"
                          d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                          clip-rule="evenodd"></path>
                  </svg>
                </div>
              {% endif %}
            {% endif %}
            {% if item.vote > 0 %}
              <div class="badge badge-pill bg-purple"
                   style="position:absolute;top:10px;right:10px;">{{ item.vote }}</div>
            {% endif %}
            <a
                    href='javascript:show_mediainfo_modal("{{ RecommendType }}", "{{ item.title }}", "{{ item.year }}", "{{ item.id }}", "recommend?t={{ RecommendType }}")'>
              <img src="{{ item.image or '../static/img/no-image.png' }}"
                   onerror="this.src='../static/img/no-image.png'"
                   class="card-img-top"
                   style="border-top-left-radius:8px !important; border-top-right-radius:8px !important; object-fit:contain;">
            </a>
            <div class="card-body">
              <div class="d-flex align-items-center">
                <div>
                  <div><strong>{{ item.title }}</strong></div>
                </div>
                <div class="ms-auto">
                  <a id="recommend_link_{{ item.orgid }}"
                     href='{% if item.fav != 1 %} javascript:show_recommend_add_modal("{{ item.id }}","{{ RecommendType }}","{{ item.title }}","{{ item.year }}"){% else %}javascript:show_recommend_del_modal("{{ item.id }}","{{ RecommendType }}","{{ item.title }}","{{ item.year }}"){% endif %}'
                     class="text-muted" title="加入/取消订阅">
                    <svg id="recommend_svg_{{ item.orgid }}" xmlns="http://www.w3.org/2000/svg"
                         class="icon icon-tabler icon-tabler-heart {% if item.fav == 1 %}icon-filled text-red{% endif %}"
                         width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
                         stroke-linecap="round" stroke-linejoin="round">
                      <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                      <path d="M19.5 13.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572"></path>
                    </svg>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      {% endfor %}
    </div>
  </div>
</div>
<script type="text/javascript">
  // 当前页码
  var CurrentPage = {{ CurrentPage }};
  // 标题
  var title_type = '{{ RecommendType }}';
  if (title_type == "hm") {
    $("#recommend_title").text("TMDB热门电影");
  }
  if (title_type == "ht") {
    $("#recommend_title").text("TMDB热门电视剧");
  }
  if (title_type == "nm") {
    $("#recommend_title").text("TMDB最新电影");
  }
  if (title_type == "nt") {
    $("#recommend_title").text("TMDB最新电视剧");
  }
  if (title_type == "dbom") {
    $("#recommend_title").text("正在热映");
  }
  if (title_type == "dbhm") {
    $("#recommend_title").text("豆瓣热门电影");
  }
  if (title_type == "dbtop") {
    $("#recommend_title").text("豆瓣电影TOP250");
  }
  if (title_type == "dbht") {
    $("#recommend_title").text("豆瓣热门电视剧");
  }
  if (title_type == "dbdh") {
    $("#recommend_title").text("豆瓣热门动漫");
  }
  if (title_type == "dbnm") {
    $("#recommend_title").text("即将上映");
  }
  if (title_type == "dbzy") {
    $("#recommend_title").text("豆瓣热门综艺");
  }
  if (title_type == "bangumi") {
    $("#recommend_title").text("Bangumi每日放送");
  }


  // 添加订阅关键字
  function add_recommend_rss_media(type, name, year, id) {
    let tmdbid;
    let doubanid;
    if (id && id.startsWith("DB:")) {
      doubanid = id.replace("DB:", "");
      tmdbid = "";
    } else if (isNaN(id)) {
      doubanid = "";
      tmdbid = "";
    } else {
      doubanid = "";
      tmdbid = id;
    }
    if (!tmdbid || ["hm", "nm", "dbom", "dbnm", "dbhm", "dbtop"].includes(type)) {
      add_rss_media(name, year, type, tmdbid, doubanid, "", "", function () {
        add_red_heart(id, type, name, year);
      });
    } else {
      show_wait_process();
      ajax_post("get_tvseason_list", {tmdbid: tmdbid}, function (ret) {
        hide_wait_process();
        if (ret.seasons.length == 1) {
          add_rss_media(name, year, "TV", tmdbid, doubanid, "", "", function () {
            add_red_heart(id, type, name, year);
          });
        } else if (ret.seasons.length > 1) {
          show_rss_seasons_modal(name, year, "TV", tmdbid, doubanid, ret.seasons, function () {
            add_red_heart(id, type, name, year);
          });
        } else {
          show_fail_modal(name + " 添加RSS订阅失败：未查询到季信息！");
        }
      });
    }
  }

  //增加红字标记
  function add_red_heart(id, type, name, year) {
    let orgid = id.replace("DB:", "").replace("BG:", "");
    $("#recommend_svg_" + orgid).removeClass()
        .addClass("icon icon-filled text-red");
    $("#recommend_link_" + orgid).attr("href", "javascript:show_recommend_del_modal('" + id + "', '" + type + "','" + name + "','" + year + "')");
  }

  //移除红字标记
  function remove_red_heart(id, type, name, year) {
    let orgid = id.replace("DB:", "").replace("BG:", "");
    $("#recommend_svg_" + orgid).removeClass()
        .addClass("icon icon-tabler icon-tabler-heart");
    $("#recommend_link_" + orgid).attr("href", "javascript:show_recommend_add_modal('" + id + "', '" + type + "','" + name + "','" + year + "')");
  }

  // 显示添加订阅
  function show_recommend_add_modal(id, type, name, year) {
    show_ask_modal("是否确定订阅： " + name + "？", function () {
      hide_ask_modal();
      add_recommend_rss_media(type, name, year, id);
    });
  }

  // 显示删除订阅
  function show_recommend_del_modal(id, type, name, year) {
    show_ask_modal("是否确定将 " + name + " 从RSS订阅中移除？", function () {
      hide_ask_modal();
      remove_rss_media(name, year, type, "", "", id, function () {
        remove_red_heart(id, type, name, year);
      });
    });
  }

  //状态标记
  var loading = false;

  function loading_data() {
    if (loading) {
      return;
    }
    loading = true;
    CurrentPage++;
    if (CurrentPage > 10) {
      return;
    }
    show_wait_process();
    ajax_post("get_recommend", {"type": title_type, "page": CurrentPage}, function (ret) {
      if (ret.Items.length > 0) {
        loading = false;
      }
      hide_wait_process();
      // 插入HTML
      for (let i = 0; i < ret.Items.length; i++) {
        let item = ret.Items[i];
        let html = '';
        html += '<div class="col-6 col-md-3 col-xl-2"><div class="card card-sm card-link-pop rounded-3">';
        if (item.weekday) {
          let bg_color = "bg-orange";
          if (item.fav == 2) {
            bg_color = "bg-green";
          }
          html += '<span class="badge badge-pill ' + bg_color + '" style="position:absolute;top:10px;left:10px;">' + item.weekday + '</span>'
        } else {
          if (item.fav == 2) {
            html += '<div class="badge badge-pill bg-green" style="position:absolute;top:10px;left:10px;padding:0;">';
            html += '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="h-3 w-3 sm:h-4 sm:w-4"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg></div>';
          }
        }
        if (item.vote) {
          html += '<div class="badge badge-pill bg-purple" style="position:absolute;top:10px;right:10px;">' + item.vote + '</div>'
        }
        html += '<a href=\'javascript:show_mediainfo_modal("' + title_type + '", "' + item.title + '", "' + item.year + '", "' + item.id + '", "recommend?t=' + title_type + '")\'>';
        if (item.image) {
          html += '<img src="' + item.image + '" onerror="this.src=\'../static/img/no-image.png\'" class="card-img-top" style="border-top-left-radius:8px !important; border-top-right-radius:8px !important; object-fit:contain;">';
        } else {
          html += '<img src="../static/img/no-image.png" class="card-img-top" style="border-top-left-radius:8px !important; border-top-right-radius:8px !important; object-fit:contain;">';
        }
        html += '</a>';
        html += '<div class="card-body"><div class="d-flex align-items-center">';
        html += '<div><strong>' + item.title + '</strong></div>';
        html += '<div class="ms-auto">';
        if (item.fav != 1) {
          html += '<a id="recommend_link_' + item.orgid + '" href=\'javascript:show_recommend_add_modal("' + item.id + '","' + title_type + '","' + item.title + '","' + item.year + '")\' class="text-muted" title="加入/取消订阅">';
          html += '<svg id="recommend_svg_' + item.orgid + '" xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-heart" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M19.5 13.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572"></path></svg>';
        } else {
          html += '<a id="recommend_link_' + item.orgid + '" href=\'javascript:show_recommend_del_modal("' + item.id + '","' + title_type + '","' + item.title + '","' + item.year + '")\' class="text-muted" title="加入/取消订阅">';
          html += '<svg id="recommend_svg_' + item.orgid + '" xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-heart icon-filled text-red" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M19.5 13.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572"></path></svg>';
        }
        html += '</a>';
        html += '</div>';
        html += '</div></div>';
        html += '</div></div>';
        $("#recommend_content").append(html);
      }
    });
  }

  $(document).ready(function () {
    $(".page-wrapper").scroll(function () {
      if ($(window).height() + $(this).scrollTop() >= $("#page_content").height() + 50) {
        loading_data();
      }
    });
  });

</script>